<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="异常消息" name="first">
                <div v-if="exceptionData.length > 0">
                    <el-card v-for="(exception, index) in exceptionData" :key="index" class="exception-card"
                        shadow="hover">
                        <el-link type="warning" @click="navigateToExceptionPage(exception.id)">
                            新的异常信息：{{ exception.id }}
                        </el-link>
                    </el-card>
                </div>
                <div v-else>
                    <el-alert title="没有新的异常信息" type="info" />
                </div>
            </el-tab-pane>

            <el-tab-pane label="系统通知" name="second">
                <div>
                    <el-alert title="这里是系统通知信息" type="warning" />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>


<script>
export default {
    data() {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,

            activeName: 'second',

            exceptionData: [] // 用于存储异常信息
        }
    },

    methods: {
        handleClick(tab) {
            console.log(tab);
            if (tab.name == 'first') {
                //业务消息逻辑
                this.userData();
            } else if (tab.name == 'second') {
                //系统通知逻辑
                this.configData();
            }
        },

        userData() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/exception/queryException', pageParam)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code == 200) {
                        this.total = resp.data.data.total;
                        //过滤掉已经解决的异常单号
                        this.exceptionData = resp.data.data.list.filter(exception => exception.processingStatus !== "2");
                    }
                })
        },

        configData() {

        },

        // 跳转到异常页面
        navigateToExceptionPage() {
            this.$router.push('/exception'); // 跳转到异常页面的路由
        },
    },

    mounted() {
        this.userData();
        this.timeoutId = setTimeout(() => {
            this.configData();
        }, 10000)//10s执行一次
    },

    beforeDestroy() {
        if (this.timeoutId) {
            clearTimeout(this.timeoutId);
        }
    },//清理定时器，防止内存泄漏或意外错误
}
</script>

<style scoped>
.exception-card {
    margin: 10px 0;
    /* 设置上下间距 */
    padding: 10px;
    /* 内边距 */
    border: 1px solid #e4e4e4;
    /* 边框样式 */
    border-radius: 5px;
    /* 圆角效果 */
    transition: box-shadow 0.3s;
    /* 添加过渡效果 */
}

.exception-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 悬停时的阴影效果 */
}


.el-alert {
    margin: 10px 0;
    /* 设置警告的间距 */
}
</style>
